<template>
	<div class="monitoring-page">
		<!-- 指标切换 + 时间范围 -->
		<div class="selectors">
			<el-radio-group v-model="activeMetric" size="small">
				<el-radio-button label="电" />
				<el-radio-button label="水" />
				<el-radio-button label="气" />
			</el-radio-group>

			<el-radio-group v-model="timeRange" size="small" style="margin-left: 20px">
				<el-radio-button label="24h">24小时</el-radio-button>
				<el-radio-button label="7d">7天</el-radio-button>
			</el-radio-group>

			<el-radio-group v-model="regionType" size="small" style="margin-left: 20px">
				<el-radio-button label="区域">区域</el-radio-button>
				<el-radio-button label="楼层">楼层</el-radio-button>
			</el-radio-group>
		</div>

		<!-- 卡片区 -->
		<el-row :gutter="20" style="margin-top: 10px">
			<el-col :span="6" v-for="item in summaryList" :key="item.title">
				<el-card>
					<div class="summary-item">
						<div class="title">{{ item.title }}</div>
						<div class="value">{{ item.value }}</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 图表 -->
		<el-row :gutter="20" style="margin-top: 20px;">
			<el-col :span="16">
				<line-chart :data="lineChartData" :threshold="thresholds[activeMetric]" />
			</el-col>
			<el-col :span="8">
				<bar-chart :data="regionStats" />
			</el-col>
		</el-row>

		<!-- 告警栏 -->
		<el-alert v-if="hasAlert" title="⚠ 当前能耗超出警戒阈值！" type="error" show-icon style="margin-top: 20px;" />
	</div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import LineChart from '@/components/charts/LineChart.vue'
import BarChart from '@/components/charts/BarChart.vue'

// 状态变量
const activeMetric = ref('电')         // 当前指标
const timeRange = ref('24h')           // 时间范围（24h / 7d）
const regionType = ref('区域')         // 维度（区域 / 楼层）

const hasAlert = ref(false)
const summaryList = ref([])
const lineChartData = ref({})
const regionStats = ref({})

// 告警阈值
const thresholds = { 电: 180, 水: 80, 气: 100 }

// 模拟数据源
const allData = {
	电: {
		'24h': [100, 160, 190, 210, 240],
		'7d': [400, 420, 460, 410, 390, 500, 480]
	},
	水: {
		'24h': [30, 55, 70, 60, 50],
		'7d': [80, 90, 85, 95, 100, 110, 120]
	},
	气: {
		'24h': [60, 70, 80, 100, 110],
		'7d': [90, 100, 105, 110, 120, 130, 140]
	}
}

const regionMock = {
	区域: { labels: ['A区', 'B区', 'C区'], values: [100, 80, 90] },
	楼层: { labels: ['1F', '2F', '3F'], values: [120, 95, 100] }
}

function updateAll() {
	const key = activeMetric.value
	const time = timeRange.value
	const values = allData[key][time]
	const xAxis = time === '24h' ? ['00:00', '06:00', '12:00', '18:00', '24:00'] : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

	// 更新图表数据
	lineChartData.value = { xAxis, series: values }
	regionStats.value = regionMock[regionType.value]

	// 更新卡片数据
	summaryList.value = [
		{ title: `当前用${key} (${key === '电' ? 'kWh' : 'm³'})`, value: values.at(-1) },
		{ title: `时间范围`, value: time },
		{ title: `维度`, value: regionType.value },
		{ title: `最大值`, value: Math.max(...values) }
	]

	// 是否超过阈值
	hasAlert.value = values.some(v => v > thresholds[key])
}

onMounted(updateAll)
watch([activeMetric, timeRange, regionType], updateAll)
</script>

<style scoped>
.selectors {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.summary-item .title {
	font-size: 14px;
	color: #888;
}

.summary-item .value {
	font-size: 20px;
	font-weight: bold;
	color: #333;
}
</style>
